import QtQuick 2.5
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.2
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import QtQml.Models 2.1
import "../js/goods_detail.js" as GD
import "../lib"
FView {
    id: root

    property string goodsId: ""

    property int rowHeight: 120 * __factor__


    function initialize()
    {
        GD.init()
    }

    Column {
        FScrollView  {
            id: apptask
            width: root.width
            height: root.height - bottomPanel.height

            ColumnLayout {
                width: root.width
                height: children.height
                spacing: 3 * __factor__
                FMarqueeImage{
                    id: smview
                    Layout.preferredWidth: root.width
                    Layout.preferredHeight:  root.height / 3

                    model: ListModel{
                        id: imageModel
                    }
                }

                Rectangle {
                    Layout.preferredWidth: root.width
                    Layout.preferredHeight: root.rowHeight
                    Text {
                        id: textTitle
                         property string temp: "标题：%1 "
                        property string name
                        anchors.left: parent.left
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.leftMargin: 18 * __factor__
                        font.pointSize: 12 * __ratio__
                    }
                    FLine {
                        anchors.bottom: parent.bottom
                        width:  root.width * 0.8
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }

                Rectangle {
                    Layout.preferredWidth: root.width
                    Layout.preferredHeight: root.rowHeight
                    Text {
                        id: textPrice
                        property string temp: "价格：%1 元"
                        anchors.left: parent.left
                        property real price: 0.0
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.leftMargin: 18 * __factor__
                    }
                    FLine {
                        anchors.bottom: parent.bottom
                        width:  root.width * 0.8
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }

                Rectangle {
                    Layout.preferredWidth: root.width
                    Layout.preferredHeight: root.rowHeight
                    Text {
                        id: textBrand
                        property string temp: "品牌：%1 "

                        property string name
                        anchors.left: parent.left
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.leftMargin: 18 * __factor__
                    }
                    FLine {
                        anchors.bottom: parent.bottom
                        width:  root.width * 0.8
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
                Rectangle {
                    Layout.preferredWidth: root.width
                    Layout.preferredHeight: root.rowHeight
                    Text {
                        id: textCategory
                        property string temp: "分类：%1 "

                        property string name
                        anchors.left: parent.left
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.leftMargin: 18 * __factor__
                    }
                    FLine {
                        anchors.bottom: parent.bottom
                        width:  root.width * 0.8
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }

                Rectangle {
                    Layout.preferredWidth: root.width
                    Layout.preferredHeight: root.rowHeight
                    Text {
                        id: textStock
                        property string temp: "库存：%1 件"


                        anchors.left: parent.left
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.leftMargin: 18 * __factor__
                    }
                    FLine {
                        anchors.bottom: parent.bottom
                        width:  root.width * 0.8
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }

                FontMetrics{
                    id: fm
                }

                Column {
                    Layout.alignment: Qt.AlignHCenter

                    Component {
                        id: customComponent
                        GridView {
                            id: gridView

                            cellWidth: gridView.width / tabView.rowCount
                            cellHeight: 96 * __factor__

                            highlight: highlight
                            highlightFollowsCurrentItem: false
                            focus: true

                            property  var dataArray:tabView.tabData[tabView.currentIndex].data


                            Component.onCompleted: {
                                console.log("index:" + tabView.currentIndex)
                                console.log("index:" + JSON.stringify(tabView.tabData))

                            }

                            Component {
                                id: highlight
                                Rectangle {
                                    width: gridView.cellWidth; height: gridView.cellHeight
                                    color: "lightsteelblue"; radius: 5
                                    x: gridView.currentItem.x
                                    y: gridView.currentItem.y
                                    Behavior on x { SpringAnimation { spring: 3; damping: 0.2 } }
                                    Behavior on y { SpringAnimation { spring: 3; damping: 0.2 } }
                                }
                            }


                            model: dataArray
                            delegate: Item {
                                width: gridView.cellWidth
                                height: gridView.cellHeight

                                Rectangle {
                                anchors.fill: parent
                                anchors.margins: 18 * __factor__

                                border.color: GridView.isCurrentItem ? "green" : "gray"


                                Text { id: textDislplay; text: dataArray[index].name;  anchors.centerIn: parent; font.pointSize: 11 * __ratio__; elide:  Text.ElideMiddle}

                                MouseArea {
                                    anchors.fill: parent
                                    propagateComposedEvents: true
                                    preventStealing: true

                                    onClicked: {
                                        gridView.currentIndex = index
                                        textPrice.price = parseFloat(dataArray[index].value);
                                        textPrice.text = textPrice.temp.arg(dataArray[index].value)

                                        var tab = tabView.getTab(tabView.currentIndex)
                                        tabView.customName = tab.title  + " : " + dataArray[index].name
                                    }
                                }
                            }
                        }
                        }
                    }

                    FTabView {
                        id: tabView
                        width: root.width
                        height: 210 * __factor__
                        tabPosition: Qt.TopEdge
                        tabHeight: 48 * __factor__
                        property var tabData: []
                        property string customName
                        property int rowCount: 3
                        onCurrentIndexChanged: {

                        }
                    }


                }

                Text {
                    id: textDescription
                    Layout.fillHeight: true

                    Layout.preferredWidth: root.width
                    Layout.preferredHeight: textDescription.contentHeight * 2.0

                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                }

            }
        }

        Rectangle {
            id: bottomPanel
            height: 120 * __factor__
            width: root.width
            property int spacing: 18 * __factor__
            Row {
                spacing: bottomPanel.spacing
                FSpinBox {
                    id: spNum
                    title: qsTr("数量")
                    width: bottomPanel.width / 2
                    height: bottomPanel.height
                    minimumValue: 1
                    maximumValue: 100000
                }

                FButton {
                    text: qsTr("立即购买")
                    width: bottomPanel.width / 4 - bottomPanel.spacing
                    height: bottomPanel.height
                    onClicked: {GD.buy()}
                }

                FButton {
                    text: qsTr("加入购物车")
                    width: bottomPanel.width / 4 - bottomPanel.spacing
                    height: bottomPanel.height
                    onClicked: {GD.addShopingCard()}
                }
            }
        }

    }
}
